<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <form action='/xxx' @submit.prevent='register'>
            用户名：<input type='text' v-model='user.username'><br>
            密码：<input type='password' v-model='user.password'><br>
            性别：<input type='radio' id='man' :value='1' v-model='user.sex'>
            <label for='man'>男</label>
            <input type='radio' id='woman' :value='0' v-model='user.sex'>
            <label for='woman'>女</label><br>
            爱好：
            <input type='checkbox' value='fish' v-model='user.hobby'>钓鱼
                 <input type='checkbox' value='swimming' v-model='user.hobby'>游泳
                 <input type='checkbox' value='stree' v-model='user.hobby'>逛街
                 <input type='checkbox' value='read' v-model='user.hobby'>阅读
                 <br>
            城市：<select v-model='user.city'>
                <option value='厦门'>厦门</option>
                <option value='北京'>北京</option>
                <option value='西安'>西安</option>
                <option value="长春">长春</option>
                </select><br>
            介绍：<textarea rows='10' v-model='user.intro'></textarea><br>
            <button>注册</button>
        </form>
    </div>
    
    <script type= 'text/javascript' src='./js/vue.js'></script>  
    <script type='text/javascript'>
        new Vue({
            el:'#app',
            data: {
                user: {
                    username: '',
                    password: '',
                    sex: 0,
                    hobby: [],
                    city: '',
                    intro: '',
                }
            },
            methods:{
                register(){
                    console.log(this.user);
                }
            }
        })
    </script>
</body>

</html>